<template>
  <div class="box-main">
    <div class="list">
      <div class="list-item" v-for="v in 5" :key="v">
        <div class="list-item-left">
          <img class="list-item-left-avatar" src="@/assets/images/comm/avatar.png" alt="" />
          <div class="list-item-left-content">
            <p class="list-item-left-content-name">原神启动</p>
            <p class="list-item-left-content-time">2024-02-05 23:32</p>
          </div>
        </div>
        <div class="list-item-right">+260</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box-main {
  padding: 6.67rem 6.15rem 6.67rem 3.08rem;
  min-height: 100vh;
  box-sizing: border-box;
  background: #FFF;
  font-family: PingFang SC, PingFang SC;

  .list {
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5.13rem;

      &:last-child {
        margin-bottom: 0;
      }

      &-left {
        display: flex;
        align-items: center;

        &-avatar {
          width: 10.77rem;
          height: 10.77rem;
          display: block;
        }

        &-content {
          margin-left: 2.31rem;
          font-weight: 400;

          &-name {
            font-size: 4.1rem;
            color: #333333;
            line-height: 5.64rem;
          }

          &-time {
            font-size: 2.56rem;
            color: #999999;
            line-height: 3.59rem;
            margin-top: 0.51rem;
          }
        }
      }

      &-right {
        font-weight: 500;
        font-size: 4.1rem;
        color: #DC376B;
        line-height: 5.64rem;
      }
    }
  }
}
</style>